<template>
  <div class="dialog-container">
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" :width="dialogWidth" :close-on-click-modal="false"
               v-draggable :top="marginTop" :custom-class="customClass" destroy-on-close @close="close()" @closed="closed">
      <!--  width="30%" -->
      <div class="title-box" v-if="showCenter">
        <div class="title">
          <div class="left-line"></div>
          <div class="center-title">{{ centerTitle }}</div>
          <div class="right-line"></div>
        </div>
      </div>
      <img v-if="isBig" src="../../assets/font/fd.png" style="position: absolute;top: 24px;right: 50px;"
           @click="openBig"/>
      <img v-else src="../../assets/font/sx.png" style="position: absolute;top: 23px;right: 50px;" @click="closeSmall"/>
      <div class="content" v-if="dialogVisible2">
        <slot name="content"></slot>
      </div>

      <div class="footer">
        <slot :name="footerName">
          <template :v-slot="footerName"></template>
        </slot>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    props: {
      footerName: {
        default: "footer"
      },
      dialogTitle: {
        default: ""
      },
      centerTitle: {
        default: "添加"
      },
      closedDialog: {
        type: Function,
        default: null
      },
      showCenter: {
        type: Boolean,
        default: true
      },
      dialogWidth: {
        default: "50%"
      }
    },
    data() {
      return {
        dialogVisible: false,
        dialogVisible2: false,
        customClass: "",
        isBig: true,
        marginTop: "15vh"
      }
    },
    created() {
      this.customClass = ""
      this.marginTop = "15vh"
    },
    watch: {
      dialogVisible: function(newVal, oldVal) {
        if(newVal) {
          this.dialogVisible2 = true
        }
      }
    },
    methods: {
      close() {
        if (this.closedDialog) {
          //触发父组件的自定义事件
          this.closedDialog()
        }
      },
      closed() {
        this.isBig = true
        this.dialogVisible2 = false
        this.customClass = ""
        this.marginTop = "15vh"
      },
      openBig() {
        this.isBig = false
        this.customClass = "myCustomClass"
        this.marginTop = "50px"
      },
      closeSmall() {
        this.isBig = true
        this.customClass = ""
        this.marginTop = "15vh"
      }
    }
  }
</script>

<style lang="scss" scoped>
  .dialog-container {
    ::v-deep .el-dialog {
      display: flex;
      flex-direction: column;
      border-radius: 8px;

      .el-dialog__headerbtn {
        // 叉号样式
        font-size: 30px;
      }

      .el-dialog__header {
        background: #e6e6e6;
        border-bottom: 1px solid #cccccc;
        border-radius: 8px;
      }

      .el-dialog__body {
        flex: 1;
        display: flex;
        flex-direction: column;
      }

      .el-dialog__headerbtn {
        font-size: 20px;
      }
    }

    ::v-deep .myCustomClass {
      position: absolute;
      left: 210px;
      width: calc(100vw - 210px) !important;
      /*height: calc(100vh - 100px) !important;*/
    }

    .title-box {
      display: flex;
      justify-content: center;

      .title {
        width: 620px;
        // border: 1px solid red;
        height: 25px;
        display: flex;
        align-items: center;
        justify-content: space-around;

        .left-line {
          height: 1px;
          width: 220px;
          background: #bebebe;
        }

        .center-title {
          font-weight: 400;
          font-size: 20px;
          color: #000000;
        }

        .right-line {
          height: 1px;
          width: 220px;
          background: #bebebe;
        }
      }
    }

    .content {
      padding: 20px;
      flex: 1;
    }

    .footer {
      display: flex;
      justify-content: center;
    }
  }
</style>
